<!--电子巡更-->
<template>
    <ul class="electronicPatrolClass">
        <li v-for="(item, index) in list" :key="index">
            <div class="titles">{{ item.name }}</div>
            <div class="boxContent">
                <span class="sj"></span>
                <p>{{ item.value }}</p>
                <div class="unit">个</div>
            </div>
        </li>
    </ul>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const list = ref([
    { name: '巡更点', value: 10, unit: '个' },
    { name: '巡更路线', value: 3, unit: '条' },
    { name: '今日巡更', value: 3, unit: '次' }
]);
</script>

<style scoped lang="scss">
.electronicPatrolClass {
    display: flex;
    justify-content: space-around;
    height: 86%;
    margin-top: 8px;
    li {
        width: calc(100% / 3 - 10px);
        height: 100%;
    }
    .titles {
        font-size: 12px;
        color: #fff;
        text-align: center;
        background: #0066ff;
        border-left: 2px solid #2fa7fd;
        border-right: 2px solid #2fa7fd;
        padding: 2px 0;
    }
    .boxContent {
        width: 100%;
        background: #213b60;
        position: relative;
        height: 50%;
        margin-top: 6px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        p {
            font-size: 20px;
            @include fontCustomStyle(#fff, 20px);
            margin-bottom: 3px;
        }
        .unit {
            font-size: 12px;
            color: rgba($color: #fff, $alpha: 0.7);
        }
        .sj {
            display: block;
            width: 0;
            height: 0;
            border: 20px solid transparent;
            border-left-color: rgba($color: #1b93fb, $alpha: 0.28);
            position: absolute;
            transform: rotate(400deg);
            right: -20px;
            bottom: -20px;
        }
    }
}
</style>
